<template>
<el-main>
    <div><z-header></z-header></div>
    <div class="containe">
        <!-- 第一行 众多行业领袖的选择，您的不二之选 -->
        <div class="bg-style">
            <div class="middle hello" v-for="item in paragraph1" :key="item">
                <h1 v-if="item.text1">{{item.text1}}</h1>
                <p v-if="item.text2">{{item.text2}}</p>
                <div class="active">
                    <el-col :span="3"><el-card class="btn1" shadow="hover">联系销售</el-card></el-col>
                    <el-col :span="3"><el-card class="btn2" shadow="hover">立即试用</el-card></el-col>
                </div>
            </div>
        </div>
        <!-- 第二行 合作企业logo展示 -->
        <div class="partner">
          <div class="middle par-logo">
            <div class="img">
              <span v-for="item in imageslogo1" :key="item"><img class="imgl" v-if="item.img1" :src="item.img1"><img v-if="item.img2" :src="item.img2"></span>
            </div>
          </div>
        </div>
        <!-- 第三行 大型会议 -->
        <div class="bg-style">
            <div class="middle meeting">
                <div class="large" v-for="item in paragraph2" :key="item">
                    <h1 v-if="item.text1">{{item.text1}}</h1>
                </div>
                <el-row>
                    <el-col v-for="(item, index) in imgtitle1" :key="index" >
                        <el-card :body-style="{ padding: '14px' }">
                            <img v-if="item.img1" :src="item.img1" class="image">
                            <div style="padding: 20px 0 12px 22px;">
                                <span style="color: #333333;" v-if="item.title1">{{item.title1}}</span>
                                <div class="bottom clearfix">
                                    <time class="time"><i class="el-icon-time l"></i> {{ getCurrentTime }} <i class="el-icon-map-location l r"> <span> {{item.span1}} </span> </i></time>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 第四行 聚会沙龙 -->
        <div class="eicotalks">
            <div class="middle meeting">
                <div class="eico" v-for="item in paragraph3" :key="item">
                    <h1 v-if="item.text1">{{item.text1}}</h1>
                    <div class="hello-eico">
                        <div class="bg-img" style="height: 360px;"></div>
                        <div class="vague-img"></div>
                        <h5 class="event" v-if="item.text2">{{item.text2}}</h5>
                        <div class="info">
                            <div class="brand"><img v-if="item.img1" :src="item.img1"></div>
                            <div class="desc" v-for="item in paragraph4" :key="item">
                                <p v-if="item.text3">{{item.text3}}</p>
                                <p v-if="item.text4">{{item.text4}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <el-row class="float-left">
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg1" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">Sketch Meetup</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/dex.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">设计</span>
                                            <span class="tag sport">分享会</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg2" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">Anyway Meetup</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/fm.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">设计</span>
                                            <span class="tag sport">粉丝聚会</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg3" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">Ping-Talk</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/ping.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">分享会</span>
                                            <span class="tag sport">品牌活动</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 第五行 演出娱乐 -->
        <div class="bg-style">
            <div class="middle meeting">
                <div class="large">
                    <h1>演出娱乐</h1>
                </div>
                <el-row class="float-left">
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg4" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">阿拉善 COART 嘉年华</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/coart.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">音乐</span>
                                            <span class="tag sport">演唱会</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg5" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">音乐梦想家巡演</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/ifmusic.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">音乐</span>
                                            <span class="tag sport">演唱会</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg6" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">協作派對的派對</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/networkparty.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">派对</span>
                                            <span class="tag sport">现场娱乐</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 第六行 文化体育 -->
        <div class="sports">
            <div class="middle meeting">
                <div class="large">
                    <h1>演出娱乐</h1>
                </div>
                <el-row class="float-left">
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg7" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">字在生活节</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/sanmingzhi.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">分享</span>
                                            <span class="tag sport">市集</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg8" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">瘦身大作战</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/shop.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">品牌活动</span>
                                            <span class="tag sport">运动健身</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg9" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">GOIN 格斗游戏大会</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/goin.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">娱乐</span>
                                            <span class="tag sport">电子竞技</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 第七行 教育公益 -->
        <div class="bg-style">
            <div class="middle meeting">
                <div class="large">
                    <h1>教育公益</h1>
                </div>
                <el-row class="float-left">
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg10" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">SPEAKOUT 2017</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/spe.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">公益</span>
                                            <span class="tag sport">演讲会</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg11" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">理性的力量</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/kexue.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">科普</span>
                                            <span class="tag sport">演讲</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col>
                        <el-card>
                            <div class="hello-columns">
                                <div class="hello-eico case">
                                    <div class="bg-img bg12" style="width: 325px; height: 300px;"></div>
                                    <h5 class="event">Girls Coding Day</h5>
                                    <div class="foot">
                                        <div class="brand"><img src="@/assets/img/hua.png"></div>
                                        <div class="tags">
                                            <span class="tag lined">公益</span>
                                            <span class="tag sport">教育</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
    <div><z-footer></z-footer></div>
</el-main>
</template>

<script>
import zHeader from '@/views/index/components/header.vue'
import zFooter from '@/views/index/components/footer.vue'
export default {
  components: { zHeader, zFooter },
  data () {
    return {
      paragraph1: [
        { text1: '众多行业领袖的选择，您的不二之选', text2: '数千家主办方择多会作为线下活动管理工具，多会是您举办线下活动的最佳选择。' }
      ],
      imageslogo1: [
        { img1: require('@/assets/img/logo1.png'), img2: require('@/assets/img/logo2.png') },
        { img1: require('@/assets/img/logo3.png'), img2: require('@/assets/img/logo4.png') },
        { img1: require('@/assets/img/logo5.png'), img2: require('@/assets/img/logo6.png') },
        { img1: require('@/assets/img/logo7.png'), img2: require('@/assets/img/logo8.png') }
      ],
      paragraph2: [
        { text1: '大型会议' }
      ],
      imgtitle1: [
        { img1: require('@/assets/img/111.png'), title1: 'NICC 中国新三板投资者大会', span1: '上海' },
        { img1: require('@/assets/img/222.png'), title1: 'GNOME Asia 2017 亚洲峰会', span1: '重庆' },
        { img1: require('@/assets/img/rubyconf.png'), title1: 'RubyConf China 2017', span1: '杭州' }
      ],
      imgtitle2: [
        { img1: require('@/assets/img/eico1.png'), title1: 'NICC 中国新三板投资者大会' }
      ],
      paragraph3: [
        { text1: '聚会沙龙', text2: 'EICO TALKS', img1: require('@/assets/img/eico3.png') }
      ],
      paragraph4: [
        { text3: 'EICO 是国内最知名的数字化业务咨询与产品设计专家。曾服务于摩拜、魅族、一加手机等国内外知名品牌。他们创造的数字化产品与品牌，正影响着中国数亿用户的工作与生活，为品牌带来持续的商业价值。' },
        { text4: 'EICO TALKS 是由 EICO 策划举办的设计分享会。EICO 使用多会发布了效果精美的活动展示页面，轻松完成报名售票。' }
      ]
    }
  },

  computed: {
    getCurrentTime: function () {
      return ((new Date()).getMonth() + 1) + '月' + (new Date()).getDate() + '日'
    }
  }
}
</script>

<style>
@import "~@/assets/css/service.css";
@import "~@/assets/css/template.css";
@import "~@/assets/css/public.css";
</style>
